<template>
  <div id="detail">
    <h2 style="margin-top: 20px">故障原因分析</h2>
    <el-card shadow="hover" style="margin-top: 20px; margin-left: 10%; width: 80%; min-height: 500px">


      <div class="content" @click="showImgViewer">
        <img :src="Img" alt="" style="height: 300px">
      </div>
      <el-image-viewer
          v-if="imgViewerVisible"
          :on-close="closeImgViewer"
          :url-list="imgList" />

    </el-card>
    <!--    <el-button type="primary" style="margin-top: 20px" @click="clickEnd">维修结束</el-button>-->
  </div>
</template>

<script>
import {request} from "../../network/2";
import {request1} from "../../network/1";

export default {
  name: "detail",
  data(){
    return{
      getData:[],
      Img: require("../../assets/ft.png"),
      imgViewerVisible:false,
      imgList: []
    }
  },
  components:{
    'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer')
  },
  methods:{

    showImgViewer(){
      this.imgViewerVisible = true;
      const m = (e) => { e.preventDefault() };
      document.body.style.overflow = 'hidden';
      document.addEventListener("touchmove", m, false); // 禁止页面滑动

    },
    closeImgViewer(){
      this.imgViewerVisible = false;
      const m = (e) => { e.preventDefault() };
      document.body.style.overflow = 'auto';
      document.removeEventListener("touchmove", m, true);
    },

  },
  created() {
    request1('/bb').then((res) => {
      let url = window.URL.createObjectURL(res.data);//这里请求接收的一定是Blod类型数据
      this.imgList = [url]
      // console.log(this.imgList);
    })
  },
  computed:{
    resDate(){
      console.log(this.$store.state.res1);
      return this.$store.state.res1.payload
    },
    res1_sign(){
      return this.$store.state.res1_sign
    }
  }
}
</script>

<style scoped>

</style>